<template>
  <el-dialog
    title="编辑分类"
    :visible.sync="dialogVisible"
    @close="dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form size="small" :model="form" ref="form">
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="封面图标" :label-width="formLabelWidth">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload(1)"
            >选择图片</el-button
          >
          <div v-if="form.image" class="img">
            <img :src="form.image" width="100" height="100" />
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="页面横幅" :label-width="formLabelWidth">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload(2)">选择图片</el-button>
          <div v-if="form.cover" class="img">
            <img :src="form.cover" width="100" height="100" />
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input
          type="number"
          v-model="form.sort"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible">取 消</el-button>
      <el-button type="primary" @click="editCategory" :loading="loading"
        >确 定</el-button
      >
    </div>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >上传图片</Upload
    >
  </el-dialog>
</template>

<script>
import ZoneproductApi from "@/api/zoneproduct.js";
import Upload from "@/components/file/Upload";
export default {
  components: {
    Upload,
  },
  data() {
    return {
        type:null,
        isupload:false,
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      loading: false,
    };
  },
  props: ["open_edit", "form"],
  created() {
    this.dialogVisible = this.open_edit;
  },
  methods: {
    /*修改分类*/
    editCategory() {
      let self = this;
      let params = this.form;
      self.loading = true;
      ZoneproductApi.editCategory(params, true)
        .then((data) => {
          self.loading = false;
          self.$message({
            message: "修改成功",
            type: "success",
          });
          self.dialogFormVisible(true);
        })
        .catch((error) => {
          self.loading = false;
        });
    },

    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit("closeDialog", {
          type: "success",
          openDialog: false,
        });
      } else {
        this.$emit("closeDialog", {
          type: "error",
          openDialog: false,
        });
      }
    },
    /*上传*/
      openUpload(e) {
        this.type = e;
        this.isupload = true;
      },
      /*获取图片*/
      returnImgsFunc(e) {
        if (e != null && e.length > 0) {
          let path = e[0].file_path;
          if( this.type == 1 ){
            //页面横幅图片
            this.form.image = path;
          }else if( this.type == 2 ){
            //页面横幅图片
            this.form.cover = path;
          }
        }
        this.isupload = false;
      },
  },
};
</script>

<style></style>
